<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>动画效果</title>
	<style type="text/css">
	#dvs{width:300px;height:300px;background:lightblue;}

	</style>
</head>
<body>
	<button>快速显示</button>
	<button>快速隐藏</button>
	<button>滚动显示</button>
	<button>滚动隐藏</button>
	<button>渐隐</button>
	<button>渐显</button>
	<button>动画效果</button>
	<button>停止</button>
	<button>延时</button>




	<div id='dvs'></div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	$('button').eq(0).click(function(){

		$('#dvs').show(5000);
	})

	$('button').eq(1).click(function(){

		$('#dvs').hide(3000);
	})

	$('button').eq(2).click(function(){

		$('#dvs').slideDown(1000);
	})

	$('button').eq(3).click(function(){

		$('#dvs').slideUp(4000);
	})

	$('button').eq(4).click(function(){

		$('#dvs').fadeOut(5000);
	})

	$('button').eq(5).click(function(){

		$('#dvs').fadeIn(3000);
	})

	$('button').eq(6).click(function(){

		$('#dvs').animate({
			width:'400px',
			height:'400px',
			marginLeft:'100px',

		},4000)
	})

	$('button').eq(7).click(function(){

		$('#dvs').stop();
	})


	$('button').eq(8).click(function(){

		$('#dvs').slideUp(3000).delay(2000).fadeIn(4000);

	})



	</script>
</body>
</html>